<template>
    <div>
        <div>
            <el-breadcrumb separator="/" style="margin: 8px;">
                <el-breadcrumb-item>AB测试</el-breadcrumb-item>
                <el-breadcrumb-item>实验管理</el-breadcrumb-item>
                <el-breadcrumb-item>新增实验</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h3 style="cursor: pointer;" @click="goback">
                <i class="el-icon-back"></i>
                新增实验
            </h3>
            <el-form ref="form" class="form" :model="form" label-width="80px">
                <h4 style="margin: 10px;">基础信息</h4>
                <el-form-item label="实验名称:">
                  <el-input v-model="form.name" class="common-input"></el-input>
                </el-form-item>
                <el-form-item label="实验描述:">
                  <el-input type="textarea" v-model="form.desc" class="common-input"></el-input>
                </el-form-item>
                <el-form-item label="实验周期:">
                    <el-date-picker type="daterange" 
                    class="small-input " 
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" v-model="form.date1"></el-date-picker>
                </el-form-item>
                <el-form-item label="实验描述:">
                    <el-input v-model="form.name" class="common-input" disabled placeholder="准确率"></el-input>
                </el-form-item>
                <h4 style="margin: 10px;">测试组设置</h4>
                <el-form-item label="数据选择:">
                    <el-select v-model="form.region" placeholder="请选择" class="common-input">
                      <el-option label="第三方数据" value="0"></el-option>
                      <el-option label="已上传数据" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="实验流量:">
                    <el-input v-model="form.name" class="common-input" disabled placeholder="准确率"></el-input>
                </el-form-item>
                <el-row>
                    <el-col offset="1" :span="20">
                        <h4 style="margin: 10px;">实验组</h4>
                        <el-form-item label="选择变量:">
                            <el-select v-model="form.region" placeholder="请选择" class="common-input">
                              <el-option label="变量1" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分流比例:">
                          <el-input v-model="form.name" class="number-input"></el-input> %
                        </el-form-item>

                        <h4 style="margin: 10px;">对照组</h4>
                        <el-form-item label="选择变量:">
                            <el-select v-model="form.region" placeholder="请选择" class="common-input">
                              <el-option label="变量1" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="分流比例:">
                          <el-input v-model="form.name" class="number-input"></el-input> %
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button>取消</el-button>
                  <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>
              </el-form>
        </div>
    </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
    data() {
        return {
            id:"",
            form: {
              name: '',
              region: '',
              date1: '',
              date2: '',
              delivery: false,
              type: [],
              resource: '',
              desc: ''
            }
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        getData(){
           
        },
        controlResult(res){
            
            
        },
        goback(){
            this.$router.back();
        }
    }
};
</script>

<style scoped>
.common-width {
    width: 200px;
}

.common-select {
    width: 350px;
}

.common-input {
    width: 500px;
}
.number-input{
    width: 80px;
}
.small-input {
    width: 305px;
}
.form{
    margin-top: 20px;
}
.table {
    width: 100%;
    font-size: 14px;
}
.label{
    font-size: 14px;
    font-weight: bold;
    color: black;
}
.text{
    font-size: 14px;
    margin-top: 8px;
    color: black;
}
.echart {
    width: 500px;
    height: 350px;
    margin-left: 25vh;
}
</style>
